<template>
  <div class="dili">
      <!-- 头部标签 -->
 <header>
     <van-nav-bar
  title="商品订单"
  left-arrow
  @click-left="onClickLeft"
  
/>
 </header>
 <!-- 搜索框 -->
 <div class="search">
     <van-search
  v-model="value"
  show-action
   shape="round"
  placeholder="关键词查询"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
 </div>
<van-divider
  :style="{ borderColor: 'gray',}"
>

</van-divider>
 <!-- tab导航 -->
 <div class="tab">
     <van-tabs v-model="active"  @click="onClick">
  <van-tab title="全部" name="/dilivery/all">
  <template #title>  全部 </template></van-tab>
  <van-tab title="代发货" name="/dilivery/paddingDilivery" ></van-tab>
  <van-tab title="待收货" name='/dilivery/paddingReceive'></van-tab>
  <van-tab title="待评价" name='/dilivery/comment'></van-tab>
  <router-view></router-view>
</van-tabs>
 </div>

  </div>
</template>

<script>

export default {
  data(){
    return{
          value: '',
            active: 2,
    }
  },
  created(){
      
  },
   methods: {
    onClickLeft() {
      this.$router.push('/login')
    },
      onSearch(val) {
      Toast(val);
    },
     onClick(name) {
       this.$router.push(name)
    },
    
  },
}
</script>

<style lang='less' >
*{
    font-size: .18rem!important;
}
.dili{
  header{
    background: #003399;
    .van-nav-bar{background:#003399;
font-size: .2rem;
padding:3% 0 0;
.van-nav-bar__title{
    color: white;
    font-size: .2rem;
}
.van-icon{
    font-size: .2rem;
    color: white;
}
     }
    
}

.van-tabs__line{
    background-color: yellow;
}
.search{
   .van-search__action{
        color:#003399;
    }
}
.van-divider{
    margin: 0;
}
}
</style>